<template>
  <div class="demo1">
        <h2 @click="showName">姓名：{{name}}</h2> 
        性别：{{sex}}
        年龄：{{myAge + 1}}
  </div>
</template>

<script>
// import {mixin,mixin2} from '../mixin' 

export default {
  name:'MyStudent',
  data(){
    return{
       msg:'欢迎~',
      //  name:'尚硅谷',
      //  sex:'北京昌平',
      // (8) 不能使用同名属性，系统会分不清，因此会直接报错
      //  age:'18',
      // (7) 从这里可以看出 从父组件传过来的数据是排在data前面的、先处理的，所以才可以获取得到
       myAge:this.age
    }
  },
  /**
   * (1) props可以接收父组件传来的属性和值，并在子组件中使用
   * (2) 目的是为了 既想只用组件的模板，但是也想要有些内容的不同，有点像重载
  */

  // (3) 简单接受：有什么就收什么
  props:['name','sex','age'],

  // methods: {
  //   // (9) 传过来的值最好不要直接修改(父亲就是需求方，不能瞎改)，非要修改可以用新的变量代理
  //   showName(){
  //     alert(this.name)
  //   }
  // },
  // mixins:[mixin,mixin2]



  // (4) 接受之前进行数据类型限制
  // props:{
  //   name:String,
  //   sex:String,
  //   age:Number
  // }

  /**
   * (5) 必要性的限定(传不传) + 数据类型限制(传之前) + 默认值的指定(如果不传) 
   * (6) 一旦传过来值了，则不可以改变它的值(千辛万苦传过来的值，一定再三确认了)
   * */ 
  // props:{
  //   name:{
  //      type:String,
  //      require:true
  //   },
  //   sex:{
  //      type:String,
  //      require:true
  //   },
  //   age:{
  //      type:Number,
  //      default:99
  //   }
  // }
}
</script>

<style>
  .demo1{
     background-color: blanchedalmond;
  }
</style>